<template>
  <div class="post">
    <div class="journalism" v-if="data.type == 1">
      <header>
        <div class="ts">
          <span class="iconfont iconjiantou2" @click="$router.back()"></span>
          <samp class="iconfont iconnew"></samp>
        </div>
        <div class="guan">
          <div class="guan_one" :class="{arr:!data.has_follow}" @click="fnn">{{data.has_follow? "已关注" : '关注'}}</div>
        </div>
      </header>
      <div class="top">{{data.title}}</div>
      <div
        class="item"
        v-if="data.create_date"
      >{{data.user.nickname}} {{data.create_date.split("T")[0]}}</div>
      <div class="content" v-html="data.content"></div>
    </div>

    <!-- 视频 -->
    <div class="vibeo" v-if="data.type == 2">
        <video controls poster="@/assets/14.png" src="https://video.pearvideo.com/mp4/adshort/20200810/cont-1690974-15317931_adpkg-ad_hd.mp4"></video>
        <div class="tou">
            <div class="im">
                <img v-if="data.user.head_img" :src="data.user.head_img | RepairUrl" alt="">
                <img v-else src="../../assets/logo.png" alt="">
                <span>{{data.user.nickname}}</span>
            </div>
            <div class="foll" :class="{arr:!data.has_follow}" @click="fnn">{{data.has_follow? "已关注" : '关注'}}</div>
        </div>
        <div class="title">{{data.title}}</div>
    </div>

    <div class="operation">
      <div class="iconfont icondianzan" :class="{arr:data.has_like}" @click="like">{{data.like_length?data.like_length:0}}</div>
      <div class="iconfont iconweixin">微信</div>
    </div>

    <comme v-for="item in commentdata" :key="item.id" :postdata="item" @reqly="reqly" />

    <div class="more" @click="$router.push('/more/'+data.id)">更多评论</div>

    <comments ref="comments" :commentss='commentss' :parentId="parentId" @CommentOnSuccess="Success" />
  </div>
</template>

<script>
import comme from '@/components/comment/indexs'
import comments from '../../components/inModule/commets'
export default {
  components:{
    comme,
    comments,
  },
  data() {
    return {
      data: {},  //文章数据
      commentdata:[],  //评论数据
      parentId:'',  //点击回复返回id和nickname
      commentss:''
    };
  },
  created() {
    const id = this.$route.params.id;
    this.$axios({
      url: "/post/" + id,
      method: "get",
    }).then((res) => {
      console.log(res);
      this.data = res.data.data;
    });

    this.GetComments() //一进页面加载当前文章评论
  },
  methods:{
      getpost(){
        const id = this.$route.params.id;
        this.$axios({
          url: "/post/" + id,
          method: "get",
        }).then((res) => {
          console.log(res);
          this.data = res.data.data;
        });
      },

      fnn(){
          if(this.data.has_follow){
              this.$axios({
                  url:"/user_unfollow/" + this.data.user.id
              }).then(res=>{
                  console.log(res);
                  if(res.data.message == '取消关注成功'){
                      this.data.has_follow = false
                      console.log('成功取消关注');
                  }
              })
              console.log('取消关注'+this.$route.params.id);
          }else{
              this.$axios({
                  url:"/user_follows/" + this.data.user.id
              }).then(res=>{
                  console.log(res);
                  if(res.data.message == '关注成功'){
                      this.data.has_follow = true
                      console.log(res.data.message);
                  }
              })
          }
      },
      like(){    //实现点赞
          this.$axios({
              url:'/post_like/' + this.$route.params.id
          }).then(res=>{
              console.log(res);
              if(res.data.message == "点赞成功"){
                  this.data.like_length += 1
                  this.data.has_like = true
                  console.log(this.data.like_length);
              }else{
                  this.data.like_length --
                  this.data.has_like = false
              }
          })
      },

      GetComments(){
        this.$axios({  //根据当前文章id获取评论数据
          url:"/post_comment/" + this.$route.params.id,
        }).then(res=>{
          console.log('文章评论数据');
          console.log(res)
          this.commentss = {index:res.data.data.length,star:this.data.has_star}  //把评论长度和收藏值储存到data函数中
          console.log("当前文章评论总数"+ this.commentss);
          if(res.data.data.length > 3){
            res.data.data.length = 3
          }
          this.commentdata = res.data.data
          })
      },

      reqly(id,name){  //监听点击回复时子组件传的id
        this.parentId = {id,name}
        this.$refs.comments.Show()
        console.log("文章页监听道德评论id:" +　this.parentId);
      },

      Success(){  //当输入框组件评论成功时返回一个函数  在这个函数里调用获取当前文章评论封装的函数
        this.GetComments()  //获取文章评论数据
        this.getpost()   //获取文章数据
        this.parentId = ''   //清楚评论id
      }
  }
};
</script>

<style lang="less" scoped>
.post {
  .journalism {
    header {
      line-height: 54/360 * 100vw;
      display: flex;
      justify-content: space-between;
      .ts {
        display: flex;
        span {
          font-size: 20/360 * 100vw;
        }
        samp {
          font-size: 50/360 * 100vw;
        }
      }
      .guan {
        display: flex;
        justify-content: center;
        align-items: center;
        .guan_one {
          height: 30/360 * 100vw;
          line-height: 30/360 * 100vw;
          padding: 0 19/360 * 100vw;
          border: solid 1px #afafaf;
          border-radius: 15/360 * 100vw;
          box-sizing: border-box;
          color: rgb(150, 148, 148);
          font-size: 13/360 * 100vw;
          &.arr{
              border-color: red;
              color: white;
              background: red;
          }
        }
      }
    }
    padding: 13/360 * 100vw;
    .top {
      font-size: 19/360 * 100vw;
      font-weight: bold;
    }
    .item {
      margin: 10/360 * 100vw 0 16/360 * 100vw;
      font-size: 14/360 * 100vw;
      color: #918d8d;
    }
    /deep/ img {
      max-width: 100%;
    }
    /deep/ .content {
      color: #646161;
    }
  }
  .vibeo{
      padding: 13/360*100vw;
      video{
          max-width: 100%;
          margin-bottom: 20/360*100vw;
      }
      .tou{
          display: flex;
          align-items: center;
          .im{
              display: flex;
              align-items: center;
              flex: 1;
              img{
                  width: 30/360*100vw;
                  height: 30/360*100vw;
                  margin-right: 6/360*100vw;
              }

          }
          .foll{
              height: 30/360*100vw;
              width: 60/360*100vw;
              line-height: 30/360*100vw;
              text-align: center;
              border: solid 1px #6d6b6b;
              border-radius: 15/360*100vw;
              font-size: 14/360*100vw;
              color: #afafaf;
              &.arr{
                  border-color: red;
                  background: red;
                  color: white;
              }
          }
      }
      .title{
          padding-top: 20/360*100vw;
          font-size: 15/360*100vw;
          font-weight: bold;
      }
  }
  .operation {
    margin: 20/360 * 100vw 0 0;
    display: flex;
    justify-content: space-around;
    padding-bottom: 10/360*100vw;
    border-bottom: solid 3px #202020;
    .iconfont {
      border: solid 1px #a3a3a3;
      border-radius: 16/360 * 100vw;
      height: 32/360 * 100vw;
      width: 80/360 * 100vw;
      text-align: center;
      line-height: 32/360 * 100vw;
      font-size: 17/360 * 100vw;
      &.arr{
          color: red;
          border-color: red;
      }
    }
    .iconweixin {
      color: #00c800;
    }
  }
  .more{ //更多评论
    line-height: 40/360*100vw;
    text-align: center;
    margin-bottom: 60/360*100vw;
  }
}
</style>